<template>
  <div class="app-container">
    <el-form ref="selectSubject"
             :inline="true"
             :model="selectSubject">
      <el-form-item label="选择题库"
                    prop="bank"
                    :rules="[{ required: true, message: '请选择题库'}]">
        <el-select v-model="selectSubject.bank"
                   placeholder="请选择">
          <el-option v-for="item in banks"
                     :key="item.id"
                     :label="item.bankName"
                     :value="item.id">
            {{ item.bankName }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="goTest('selectSubject')">开始训练</el-button>
      </el-form-item>
    </el-form>

    <!-- 训练记录表格 -->
    <div class="table-title">
      训练记录
    </div>
    <el-table v-loading="listLoading"
              :data="trainRecords"
              element-loading-text="加载中..."
              empty-text="暂无数据"
              border
              fit
              highlight-current-row>
      <!-- 序号 -->
      <el-table-column align="center"
                       label="序号"
                       width="80">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <!-- 名称 -->
      <el-table-column label="名称">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <!-- 学科 -->
      <el-table-column label="学科"
                       width="110"
                       align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <!-- 分数 -->
      <el-table-column class-name="status-col"
                       label="分数"
                       width="110"
                       align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <!-- 考试时间 -->
      <el-table-column align="center"
                       prop="created_at"
                       label="考试时间"
                       width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   layout="prev, pager, next"
                   :total="1000" />
  </div>
</template>

<script>
import { findBank } from '@/api/train'

export default {
  name: 'Reports',
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      banks: [], // 题库
      selectSubject: {
        bank: '' // 选中的题库
      },
      trainRecords: null, // 训练记录
      listLoading: true // 加载动画
    }
  },
  created() {
    // 获取题库
    this.getBanks()
    // 获取训练记录
    this.getRecords()
  },
  methods: {
    // 获取题库
    getBanks() {
      findBank({ questionEquipmentId: true })
        .then((res) => {
          // console.log(res)
          this.banks = res.data
        })
        .catch((err) => {
          console.log('获取题库失败', err)
        })
    },
    // 获取训练记录
    getRecords() {
      this.listLoading = true // 加载动画
      console.log('获取训练记录')

      this.listLoading = false // 关闭加载动画
    },
    // 开始训练
    goTest(selectSubject) {
      this.$refs[selectSubject].validate((valid) => {
        if (valid) {
          // console.log("题库id",this.selectSubject.bank)
          const newTab = this.$router.resolve({
            name: 'testPage',
            params: { id: this.selectSubject.bank }
          })
          window.open(newTab.href, '_blank')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-title {
  height: 60px;
  width: 100%;
  line-height: 60px;
  font-weight: 700;
  color: #909399;
  box-sizing: border-box;
  border: 1px solid #ebeef5;
  border-bottom: 0px;
  padding: 0px 20px;
}
</style>
